<template>
  <div class="tab_box_work">
    <el-tabs
      v-model="activeName"
      v-init-screen-h="10"
      tab-position="left"
      @tab-click="handleClick"
    >
      <el-tab-pane label="总览" name="总览" />
      <el-tab-pane
        v-for="item in manufactureSiteList"
        :key="item"
        :label="item"
        :name="item"
      />
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    manufactureSiteList: {
      type: Array,
      default: () => []
    },
    value: {
      type: String,
      default: "总览"
    }
  },
  computed: {
    activeName: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit("handleClick");
    }
  }
};
</script>

<style scoped lang="scss">
.tab_box_work {
  width: 100%;
  /deep/ {
    .el-tabs__nav {
      height: 100%;
      padding-bottom: 4px;
      .el-tabs__item {
        height: 20% !important;
        // margin-bottom: 2px;
      }
    }
    .el-tabs--left {
      .el-tabs__item {
        display: flex;
        align-items: center;
        padding: 0px 16px 0px 8px;
        // padding: 0px;
        margin-right: 20px;
        width: 30px;
        line-height: 24px;
        height: auto;
        word-wrap: break-word;
        white-space: pre-line;
        margin-bottom: 5px;
        background: #2339a4;
        border-radius: 5px;
      }
    }
    .el-tabs__item.is-active {
      color: #fff !important; //修改激活表头字体颜色，默认是蓝色
      background: linear-gradient(
        to top,
        rgba(93, 200, 250, 1) 0%,
        rgba(74, 111, 246, 1) 100%
      );
    }
    .el-tabs__active-bar {
      background-color: transparent !important;
    }

    /*去掉tabs底部的下划线*/
    .el-tabs__nav-wrap::after {
      position: static !important;
    }

    .el-tabs__nav-scroll {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .el-tabs__item {
      color: #fff;
    }
    .el-tabs__item.is-active {
      color: #409eff;
    }
    .el-tabs__nav-wrap::after {
      background-color: transparent;
    }
  }
}
</style>
